<template>
    <div class="panel minh_624">
        <div class="item_title pr">
            基本信息
            <div class="tools-box" v-show="!isEdit" @click="editFun">
                <a class="displayB">
                    <i class="el-icon-edit-outline"></i>编辑
                </a>
            </div>
        </div>
        <div class="padding_16 clearfix" v-show="!isEdit">
            <div class="fl" style="width: 70%;">
                <div class="base-info-box">
                    <div class="base-info-row">
                        <p class="base-info-label-cell">昵称：</p>
                        <p class="base-info-data-cell">{{infoData.u_nickname}}</p>
                    </div>
                    <div class="base-info-row">
                        <p class="base-info-label-cell">性别：</p>
                        <p class="base-info-data-cell">{{(infoData.u_sex == 1)?'男':'女'}}</p>
                    </div>
                    <div class="base-info-row">
                        <p class="base-info-label-cell">手机号：</p>
                        <p class="base-info-data-cell">{{infoData.u_phone}}</p>
                    </div>
                    <div class="base-info-row">
                        <p class="base-info-label-cell">邮箱：</p>
                        <p class="base-info-data-cell">{{infoData.u_email}}</p>
                    </div>
                    <div class="base-info-row">
                        <p class="base-info-label-cell">所在地：</p>
                        <p class="base-info-data-cell">{{infoData.pName}}-{{infoData.cName}}</p>
                    </div>
                    <div class="base-info-row">
                        <p class="base-info-label-cell">个人介绍：</p>
                        <p class="base-info-data-cell">{{infoData.u_personal_info}}</p>
                    </div>
                </div>
            </div>
            <div class="fr" style="width: 28%;">
                <div class="base-info-box-header-icon centerauto">
                    <img v-if="infoData.u_head_portrait" :src="infoData.yuming + infoData.u_head_portrait"/>
                    <img v-else src="../../../assets/images/userPic.png"/>
                </div>
            </div>
        </div>
        <!-- 编辑 -->
        <el-form ref="form" :model="form" label-width="100px" v-show="isEdit">
            <div class="padding_16 clearfix">
                <div class="fl" style="width: 70%;">
                    <el-form-item label="昵称：">
                        <el-input v-model="form.u_nickname" placeholder="请输入昵称"></el-input>
                    </el-form-item>
                    <el-form-item label="性别：">
                        <el-radio-group v-model="form.u_sex">
                            <el-radio :label="1">男</el-radio>
                            <el-radio :label="2">女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="手机号：">
                        <el-input v-model="form.u_phone" disabled placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱：">
                        <el-input v-model="form.u_email" disabled placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="所在地：" prop="u_province">
                        <el-select v-model="form.u_province" placeholder="请选择" @change="provinceChange" style="width: 49%;">
                            <el-option v-for="(item,index) in pervinceOpt" :key="index" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                        <el-select v-model="form.u_city" placeholder="请选择" style="width: 50%;">
                            <el-option v-for="(item,index) in cityOpt" :key="index" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="个人介绍：">
                        <el-input v-model="form.u_personal_info" placeholder="请输入"></el-input>
                    </el-form-item>
                </div>
                <div class="fr" style="width: 28%;">
                    <div class="base-info-box-header-icon centerauto">
                        <el-upload ref="upload" class="avatar-uploader" :show-file-list="false" action="uploadUrl" :http-request="uploadSectionFile" :on-success="uploadSuccess">
                            <img v-if="form.u_head_portrait" :src="id_positive" class="avatar">
                            <img v-else src="../../../assets/images/userPic.png"/>
                        </el-upload>
                    </div>
                </div>
            </div>
            <div class="text-center" style="padding-bottom: 50px;">
                <el-button type="primary" @click="onSubmit('form')" class="btn_200">保存</el-button>
                <el-button class="btn_200" @click="cancelFun">取消</el-button>
            </div>
        </el-form>
    </div>
</template>
<script>

    export default {
        data(){
            return{
                infoData: {},
                isEdit: false,  //是否编辑
                form: {
                    'u_nickname': '',
                    'u_sex': '',
                    'u_phone': '',
                    'u_email': '',
                    'u_province': '',
                    'u_city': '',
                    'u_personal_info': '',
                    'u_head_portrait': '',
                },
                pervinceOpt: [],  //省下拉
                cityOpt: [],  //市下拉
                id_positive: '',  //头像
                newAddress: '',  //头像  需要上传的地址
            }
        },
        methods: {
            init(){

                var _this = this;

                this.$httpGet('/api/index/Personal_center/enterpriseInfo',{
                    'u_id': window.localStorage.uid,
                }).then(response => {
                    
                    if(response.code == 200){

                        _this.infoData = response.msg;
                        _this.form.u_nickname = response.msg.u_nickname;
                        _this.form.u_sex = response.msg.u_sex;
                        _this.form.u_phone = response.msg.u_phone;
                        _this.form.u_email = response.msg.u_email;
                        
                        _this.form.u_province = response.msg.u_province;
                        if(response.msg.u_province){
                            _this.provinceChange(response.msg.u_province);
                        }
                        _this.form.u_city = response.msg.u_city;
                        _this.form.u_personal_info = response.msg.u_personal_info;
                        if(response.msg.u_head_portrait){
                            _this.id_positive = response.msg.yuming + response.msg.u_head_portrait;
                        }
                        _this.form.u_head_portrait = response.msg.u_head_portrait;
                        
                    }else{
                        this.$message({
                            message: response.msg,
                            type: 'warning'
                        });
                    }

                });
                this.pervinceFun();  //省下拉
            },
            //编辑
            editFun(){
                this.isEdit = true;
            },
            //省下拉
            pervinceFun(){
                var _this = this;
                // 省下拉
                this.$httpGet('/api/index/Personal_center/pervincelist').then(response => {

                    if(response.code == 200){
                        
                        _this.pervinceOpt = response.msg;
                        
                    }

                });
            },
            // 省   change
            provinceChange(id){
                
                var _this = this;

                _this.form.u_city = '';
                // 市下拉
                this.$httpGet('/api/index/Personal_center/citylist',{'pid': id}).then(response => {

                    if(response.code == 200){
                        
                        _this.cityOpt = response.msg;
                        _this.form.u_city = response.msg[0].id;
                        
                    }

                });
            },
            //自定义上传
            uploadSectionFile(file){
                
                var _this = this;

                const formData = new FormData();
                formData.append('files', file.file);
                formData.append('uid', window.localStorage.uid);
                
                this.$httpPost('/api/index/Feedback/uploadImgs',formData).then(response => {

                    if(response.code == 200){

                        this.$message({
                            message: response.msg,
                            type: 'success'
                        });
                        
                        _this.form.u_head_portrait = response.newAddress;

                        file.onSuccess();

                    }else if(response.code == 301){
                        this.$message({
                            message: response.msg,
                            type: 'warning'
                        });
                        _this.$refs.upload.clearFiles();
                    }else{
                        this.$message({
                            message: response.msg,
                            type: 'warning'
                        });
                    }

                });
            },
            //上传成功
            uploadSuccess(type, file, fileList) {
                
                this.id_positive = URL.createObjectURL(file.raw);
                
            },
            //提交表单
            onSubmit(){
                
                var _this = this;

                let data = {};
                data.u_id = window.localStorage.uid;
                data.u_nickname = _this.form.u_nickname;
                data.u_province = _this.form.u_province;
                data.u_city = _this.form.u_city;
                data.u_personal_info = _this.form.u_personal_info;
                data.u_head_portrait = _this.form.u_head_portrait;
                
                this.$httpPost('/api/index/Personal_center/UpdateInfo',data).then(response => {

                    if(response.code == 200){
                        
                        this.$message({
                            message: response.msg,
                            type: 'success'
                        });
                        setTimeout(() => {
                            _this.cancelFun();
                        }, 2000);
                        
                    }else{
                        this.$message({
                            message: response.msg,
                            type: 'warning'
                        });
                    }

                });
            },
            //取消
            cancelFun(){
                this.init();
                this.isEdit = false;
            },
        },
        mounted(){
            this.init();
        },
    }
</script>
